<!--
 * @author: wangshuaixue
 * @Date: 2024-10-08 15:59:44
 * @description: 
 * @LastEditTime: 2024-10-09 10:07:15
 * @LastEditors: wangshuaixue
 * @FilePath: /v3-admin/src/components/CodingEditor/index.vue
-->
<template>
  <div id="editorContainer" style="height: 300px" />
</template>

<script>
// import * as monaco from 'monaco-editor';	// 全部导入
import { ref, onMounted, toRaw } from "vue"

export default {
  props: {
    value: String,
    language: String
  },
  setup(props, { emit }) {
    const editor = ref(null)
    onMounted(() => {
      setTimeout(() => {
        editor.value = monaco.editor.create(document.getElementById("editorContainer"), {
          value: props.value || "",
          language: "javascript",
          minimap: {
            enabled: false //是否显示侧边栏
          },
          colorDecorators: true, //颜色装饰器
          readOnly: false, //是否开启已读功能
          theme: "vs-dark" //主题
        })

        // 监听编辑器内容变化
        editor.value.onDidChangeModelContent(() => {
          // 触发父组件的 change 事件，通知编辑器内容变化
          emit("change", toRaw(editor.value).getValue())
        })
      }, 100)
    })

    return {
      editor
    }
  }
}
</script>
